<template>
  <div class="divSection videoPage">
    <img src="static/images/start.png" class="startBtn" id='startBtn' @click="playVideo">

    <video id="video" preload="auto" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" src="static/images/video.mp4"></video>
    <img id="videoFront" src="static/images/video-begin.jpg" width="100%"/>
    <hr class="position:absolute;top:500px">
    <img src="static/images/startBtn.png" class="startBtn1" id='startBtn1' @click="onStartClick">
  </div>
</template>
<style type="text/css">
  .videoPage{
    position: absolute;
    top:0;
    left: 0;
    background-position: bottom center;
    background-size: 100% auto;
    background-color: rgba(0,0,0,0.5);
  }
  .startBG{
    width: 100%;
    height: 100%;
  }
  .pixi{
    position: absolute;
    top: 0px;
    width: 750;
    height: 1030;
  }
  .inputTxt{
    position: absolute;
    width: 80%;
    height: 20px;
    left: 10%;
    bottom: 0px;
  }
  .startBtn{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
 }
 .startBtn1{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   z-index: 999;
   display: none;
 }
 .w1{
   position: absolute;
   top: 0px;
   left: 0px;
 }
 #video, #videoFront {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  background-color: #000;
  z-index: 10;
  -webkit-transform: translate(0, -50%);  
}
</style>
<script type="text/javascript">
  export default{
    data(){
      return {
        fileInput:null,
        video:null,
        videoFront:null,
      } 
    },
    mounted(){
      // var startBtn = document.getElementById("startBtn");
      // $(".startBtn").addClass("animated bounceOutLeft");
      // $(".startBtn").one("animationend",()=>{
      //   console.log("animationend");
      //   $('#startBtn').removeClass('bounceOutLeft');
      // });

      this.video = document.getElementById('video');
      this.videoFront = document.getElementById('videoFront');

    },
    methods:{  
     playVideo: function() {
      console.log("playVideo");
      var that = this;
      this.video.style.display = "block",
      this.video.play(),
      this.videoFront.style.display = "none";
      document.getElementById("startBtn1").style.display = "block";
      var  start =  document.getElementById("startBtn1");
      


      this.video.addEventListener("ended", function() {
        that.video.pause();
        //that.video.style.display = "none"
      })
    },
    onStartClick(){
     alert("onStartClick");
   }
 }
}
</script>